<!--<template>-->
<!--  <div class="dashboard-container">-->
<!--    <div class="dashboard-text">欢迎您: {{ name }}</div>-->
<!--  </div>-->
<!--  -->
<!--</template>-->

<!--<script>-->
<!--import { mapGetters } from 'vuex'-->

<!--export default {-->
<!--  name: 'Dashboard',-->
<!--  computed: {-->
<!--    ...mapGetters([-->
<!--      'name'-->
<!--    ])-->
<!--  }-->
<!--}-->
<!--</script>-->
<template>
    <div class="dashboard-container">
      <div class="dashboard-text">欢迎您: {{ name }}</div>
      <div>
        <ve-line :data="chartData"></ve-line>
      </div>
    </div>
</template>

<script>
  import VeLine from 'v-charts/lib/line.common'
  import { mapGetters } from 'vuex'
  import {indexData} from '@/api/user'
  export default {
    name: "Dashboard",
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    components: { VeLine },
    data () {
      return {
        chartData: {
          columns: ['date', 'PV'],
          rows: []
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        indexData().then(response => {
          this.chartData.rows = response.data
          console.log(this.rows)
        })
      }
    }
  }
</script>
<style scoped>
</style>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
